<template>
    <div class="c-item">
        <img :src="item.src"/>
        <div>
            <div class="c-item-title">{{item.title}}</div>
            <div class="c-item-subTitle">{{item.subTitle}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "item.vue",
        props: {
            item: {
                type: Object,
                default: () => ({
                    src: require('@/assets/a1.png'),
                    title: '',
                    subTitle: ''
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .c-item {
        width: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
        transition: all 250ms cubic-bezier(.02, .01, .47, 1);
        cursor: pointer;
        &:hover {
            transform: translate(0,-16px);
            transition-delay: 0s !important;
        }
        img {
            width: 92px;
            margin-right: 12px;
        }

        &-title {
            font-size: 32px;
        }

        &-subTitle {
            font-size: 16px;
            margin: 5px 0px 0px;
        }
    }
</style>